<template>
  <div class="page">
    <div class="content">
      <!-- 简介 -->
      <div class="intro" ref="intro">
        <h1>RotateCards</h1>
        <p>3D 旋转卡片</p>
      </div>
      <!-- 演示 -->
      <div class="demonstration" ref="demonstration">
        <RotateCardsDemo />
      </div>
      <!-- 示例代码 -->
      <div ref="code">
        <CodeContent :data-list="codeList" />
      </div>
      <!-- 属性 -->
      <div ref="attr">
        <Table v-bind="attribute" />
      </div>
      <!-- 插槽 -->
      <div ref="sockets">
        <Table v-bind="slot" />
      </div>
      <!-- 方法 -->
      <div ref="fun">
        <Table v-bind="method" />
      </div>
    </div>
    <Menu :options="menuOption" />
  </div>
</template>

<script setup>
import {reactive, ref} from "vue"
import {RotateCardsDemo, RotateCardsCode} from "../components/demonstration"
import { attribute, slot, method} from "./config/rotate-cards-demo"
defineOptions({
  name: "RotateCardsDemo",
  inheritAttrs: false,
})

const intro = ref()
const demonstration = ref()
const code = ref()
const attr = ref()
const sockets = ref()
const fun = ref()

const menuOption = reactive([
  {
    ref: intro,
    label: "简介"
  },
  {
    ref: demonstration,
    label: "效果展示"
  },
  {
    ref: code,
    label: "示例代码"
  },
  {
    ref: attr,
    label: "属性"
  },
  {
    ref: sockets,
    label: "插槽"
  },
  {
    ref: fun,
    label: "方法"
  },
])

const codeList = reactive([
  {
    label: "示例代码",
    code: RotateCardsCode
  },
])
</script>

<style scoped>

</style>